<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>骨医快线</title>
	<link href="../../css/mui.plus.css" rel="stylesheet" />		
	<style type="text/css">
		.pat-scale {
			color: #666;
		}
		.pat-title, .pat-subject {
			padding: 11px 15px;
		}
		.pat-title .mui-pull-right {
			font-size: 12px;
		}
		.pat-title .mui-pull-right>b {
			color: #30B497;
		}
		.pat-subject .mui-input-row {
			font-size: 15px;
			color: #666;
		}
		.pat-subject {
			color: #333;
		}
		.mui-input-group .mui-input-row:after, 
		.mui-input-group:after,
		.mui-input-group:before {
			height: 0;
		}
		.mui-input-group {
			margin: 0 15px;
			background-color: #f5f5f5;
		}
		.mui-radio input[type="radio"]:before, .mui-checkbox input[type="checkbox"]:before {
			font-size: 20px;
		}
		footer {
			padding: 20px 30%;
		}
		.mui-btn-block {
			padding: 8px 0;
		}
	</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav oe-pri-bar">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">量表详情</h1>
	    <a class="mui-icon mui-pull-right">
        	<img src="../../images/icon-qrcode.png" style="width: 20px;" id="btn-qrcode">
        </a>
	</header>
	
	<div class="mui-content pat-scale">
		<ul id="pa-info" class="mui-table-view common-img-text-list">
			<li class="mui-table-view-cell mui-media">
				<a href="javascript:;">
					<img class="mui-media-object mui-pull-left" src="../../images/pa_avatar.png" style="border-radius: 100px;">
					<div class="mui-media-body" style="padding-top: 15px;">
						<span class="pa-name">加载中...</span>
						<span class="pa-sur"></span>
					</div>
				</a>
			</li>
		</ul>
		
		<div class="oe-divide-block"></div>
		
		<div id="topic-list">
			<div class="pat-title">
				<span>加载中...</span>
				<span class="mui-pull-right">共&nbsp;<b>N</b>&nbsp;题</span>
			</div>		
			
			<form class="mui-input-group">
		    	<div class="oe-emp">
	        		<img src="../../images/blank_page/pub.png"/>
	        	</div>
			</form>
		</div>
	</div>
	
	<script id="tmp-pa" type="text/html">
		<li class="mui-table-view-cell mui-media">
			<a href="javascript:;">
				<img class="mui-media-object mui-pull-left" src="../../images/pa_avatar.png" style="border-radius: 100px;">
				<div class="mui-media-body" style="padding-top: 15px;">
					<span class="pa-name">{{pa.rec_name}}</span>
					<span class="pa-sur">{{pa.rec_surgery_name}}</span>
				</div>
			</a>
		</li>
	</script>
	<script id="tmp-scale" type="text/html">
		{{each data as v i}}
			{{if data[i].rs_id === target}}
				<div class="pat-title">
					<span>{{v.rs_name}}</span>
					<span class="mui-pull-right">共&nbsp;<b>{{v.rs_subject_count}}</b>&nbsp;题</span>
				</div>		
				
				<form class="mui-input-group">
					{{each data[i].subjects as w j}}
				    	{{if w.subject_option_style === 'RADIO'}}
					    	<div class="pat-subject">
					    		{{w.subject_num}}.{{w.subject_question}}
					    		{{each w.options as u k}}
						    		<div class="mui-input-row mui-radio ">
							        	<label>{{u.option_content}}</label>
							        	<input name="{{w.subject_id}}" type="radio"
						        		 	data-rs='{{v.rs_id}}'
						        		 	data-sub='{{w.subject_id}}'
						        		 	data-opt='{{u.option_id}}'
						        		 	data-score='{{u.option_score}}'>
							   		</div>
							   	{{/each}}
						   	</div>
						{{else if w.subject_option_style === 'CURSOR'}}	
							<div class="pat-subject">
								{{w.subject_num}}.{{w.subject_question}} (范围：{{w.subject_min}}~{{w.subject_max}})
								<div class="mui-input-row mui-input-range">
									{{if v.rs_id === '58'}}
									<div style="position: relative;width: 65%;margin-left: 35%;">
							        	<span>不痛</span>
						        		<span style="position: absolute; right: 0;">最痛</span>
							        </div>
									{{/if}}
									{{if v.rs_id === '57' && w.subject_id === '247'}}
									<div style="position: relative;width: 65%;margin-left: 35%;">
							        	<span>内翻</span>
						        		<span style="position: absolute; right: 0;">外翻</span>
							        </div>
									{{/if}}
									<label>{{w.subject_min}}</label>
							        <input type="range" min="{{w.subject_min}}" max="{{w.subject_max}}" value="{{w.subject_min}}"
							        	data-rs='{{v.rs_id}}'
					        		 	data-sub='{{w.subject_id}}'>
							    </div>
						    </div>
				    	{{/if}}
				    {{/each}}
				    {{if v.rs_id === '58'}}
				    	<img style="padding: 25px 20px;" src="../../images/scale/vas.png"/>
				    {{/if}}
				</form>
			{{/if}}
		{{/each}}
		<footer>
			<button id="btn-submit" type="button" class="mui-btn mui-btn-primary mui-btn-block">完&nbsp;&nbsp;成</button>
		</footer>
	</script>
	
	
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/app.js"></script>
	<script src="../../js/lib/template.js"></script>
	<script src="../../data/scale.data.js"></script>
	<script type="text/javascript">
		(function($, a){
			var tmpData = scaleData,
				html,
				wv,
				id = {
					rs_id: '',
					rec_id: ''
				};
				
			$('#topic-list').on('change', 'input[type=radio]', function(){
				previousSbilingChekced(this);
			});
			
			$('#topic-list').on('input', 'input[type=range]', function(){
				// HSS膝关节评分量表处理
				this.previousElementSibling.innerHTML = this.value;
			});
			
			$('body').on('tap', '#btn-qrcode', function(){
				$.openWindow({
					url: 'qrcode.html',
					waiting: {
						autoShow: false
					},
					extras: id
				});
			});
			
			$('#topic-list').on('tap', '#btn-submit', function(){
				var data = a.form.serializeForm('topic-list');
				data.med_id = id.rec_id;
				data.type = '2';
				
				a.net.post('c_rating_scale/get_evaluate', data, function(data){
					if(data && data.code === '100'){
						id.sc_rec_id = data.data.rec_id;
						var score = '分数\n' + objToStr(data.data.score),
							percentage = data.data.percentage ? '\n指数\n' + objToStr(data.data.percentage) : '';
							evaluate = data.data.evaluate ? '\n评分结果\n'+ objToStr(data.data.evaluate) : '';
						
						$.confirm(score+percentage+evaluate, '骨医快线', ['返回', '查看结果'], function(e){
							if(e.index === 0){
								$.back();
							}else {
								$.openWindow({
									url: 'detail-rec-res.html',
									waiting: {
										autoShow: false
									},
									extras: {
										transId: id
									}
								});
							}
						});
					}else if(data.code === '300'){
						$.toast('您尚未填写任何数据哦');
					}
					
				});
			});
				
			$.plusReady(function(){
				var wv = plus.webview.currentWebview();
				id.rs_id = wv.rs_id;
				id.rec_id = wv.rec_id;
				
				// 病人信息
				getPatientInfoByRecId(id.rec_id);
				
				// 量表信息
				tmpData.target = plus.webview.currentWebview().rs_id;
				var html = template('tmp-scale', tmpData);
				document.getElementById("topic-list").innerHTML = html;
				
				// 初始化input组件
				$('input[type=range]').input();
				
			});
			
			var getPatientInfoByRecId = function(recId){
				app.net.get('c_med_record/show', {rec_id: recId}, function(data){
					if(data &&data.code === '100'){
						tmpData.pa = data.data;
						html = template('tmp-pa', tmpData)
						document.getElementById("pa-info").innerHTML = html;
					}
				});
			}
			
			var objToStr = function(obj){
				if((typeof obj === 'string') || (typeof obj === 'number')){
					return obj + '\n';
				}else if(typeof obj === 'object'){
					var tmp = '';
					for(var i in obj){
						tmp += i + ':' + obj[i] + '\n'
					}
					return tmp;					
				}else {
					console.error('Type error');
				}
			}
			
			var previousSbilingChekced = function(el){
				var subject = el.parentElement.parentElement;
				if(subject.oldLabel){
					subject.oldLabel.style.color = '#666';
				}
				if(el.checked){
					el.previousElementSibling.style.color = '#30b497';
					subject.oldLabel = el.previousElementSibling;
				}
			}
			
		}(mui, app));
	</script>
</body>
</html>